<div class="padding-bottom-45">
    <div class="modal-header">
        <div class="modal-title">编辑用户</div>
    </div>

    <form nz-form #validateForm="ngForm" (ngSubmit)="save()" *ngIf="user">
        <nz-tabset>
            <nz-tab [nzTitle]="'用户详细'">
                <!-- 用户账号 -->
                <nz-form-item>
                    <nz-form-control [nzErrorTip]="errorUserNameTpl" nzHasFeedback>
                        <input nz-input name="userName" #userName="ngModel" [(ngModel)]="user.userName"
                            [placeholder]="'用户账号'" required>
                        <ng-template #errorUserNameTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                不能为空!
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <!-- 名 / 姓名 -->
                <nz-form-item>
                    <nz-form-control [nzErrorTip]="errorNameTpl" nzHasFeedback>
                        <input nz-input name="name" #name="ngModel" [(ngModel)]="user.name" [placeholder]="'用户姓名'"
                            autocomplete="name" required>
                        <ng-template #errorNameTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                不能为空!
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <!-- 邮箱 -->
                <nz-form-item>
                    <nz-form-control [nzErrorTip]="errorEmailTpl" nzHasFeedback>
                        <input nz-input name="emailAddress" #emailAddress="ngModel" [(ngModel)]="user.emailAddress"
                            [placeholder]="'Email'" autocomplete="email" required email>
                        <ng-template #errorEmailTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                不能为空!
                            </ng-container>
                            <ng-container *ngIf="control.hasError('email')">
                                邮箱格式不对!
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <!-- 激活 -->
                <nz-form-item>
                    <label nz-checkbox name="isActive" [(ngModel)]="user.isActive">是否启用</label>
                </nz-form-item>
            </nz-tab>

            <nz-tab [nzTitle]="'角色'">
                <nz-checkbox-group name="roles" [(ngModel)]="roleList"></nz-checkbox-group>
            </nz-tab>
            <nz-tab [nzTitle]="'组织单位'">
                <nz-input-group [nzSuffix]="suffixIcon">
                    <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" name="searchValueName">
                </nz-input-group>
                <ng-template #suffixIcon>
                    <i nz-icon nzType="search"></i>
                </ng-template>
                <nz-tree #treeCom [nzData]="nodes" nzCheckable="true" nzMultiple="true" nzCheckStrictly="true"
                    [nzCheckedKeys]="defaultCheckedKeys" (nzClick)="nzEvent($event)"
                    (nzCheckBoxChange)="nzEvent($event)" [nzSearchValue]="searchValue">
                </nz-tree>
            </nz-tab>
        </nz-tabset>

        <!-- 功能按钮 -->
        <div class="modal-footer">
            <button nz-button type="button" [disabled]="saving" (click)="close()">取消</button>
            <button nz-button [nzType]="'primary'" type="submit" [disabled]="saving">保存</button>
        </div>
    </form>
</div>